
import { Suspense } from "react";
import { lazy } from "react";
import { createBrowserRouter } from "react-router-dom";

const Login = lazy(() => import('@/views/login/index'))
const Layout = lazy(() => import('@/views/Layout'))
const Page1 = lazy(() => import('@/views/Page1'))
const Page2 = lazy(() => import('@/views/Page2'))
const Page3 = lazy(() => import('@/views/Page3'))
const User = lazy(() => import('@/views/User'))

const withLoading = (comp: JSX.Element) => {
    return (
        <Suspense fallback={'加载中'}>{comp}</Suspense>
    )
}

const router = createBrowserRouter([
    {
        path:'/',
        //element:<Suspense fallback={'加载中'}><Layout /></Suspense>,
        element:withLoading(<Layout />),
    },
    {
        path:'/',
        //element:<Suspense fallback={'加载中'}><Layout /></Suspense>,
        element:withLoading(<Layout />),
        children:[
            {
                index: true,
                //element:<Suspense fallback={'加载中'}><Page1 /></Suspense>,
                element:withLoading(<Page1 />),
            },
            {
                path: 'page2',
                //element:<Suspense fallback={'加载中'}><Page2 /></Suspense>,
                element:withLoading(<Page2 />),
            },
            {
                path:'/page3',
                //element:<Suspense fallback={'加载中'}><User /></Suspense>
                element:withLoading(<Page3 />),
            },
            {
                path:'/user',
                //element:<Suspense fallback={'加载中'}><User /></Suspense>
                element:withLoading(<User />),
            },
            
        ]
    },
    {
        path:'/login',
        //element:<Suspense fallback={'加载中'}><Login /></Suspense>
        element:withLoading(<Login />),
    },
    {
        path:'*',
        //element:<Suspense fallback={'加载中'}><Login /></Suspense>
        element:withLoading(<Layout />),
    }
])

export default router